<template>
  <div id="app">
    <!-- 顶部导航栏 -->

    <el-row class="header-el-row">
      <el-col :span="20">
        <div v-if="showHeader" class="header">
          <el-menu
            mode="horizontal"
            :default-active="activeMenu"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
          >
            <el-menu-item
              v-for="route in mainRoutes"
              :key="route.path"
              :index="route.path"
              @click="navigateTo(route)"
            >
              <i :class="route.Icon"></i>
              <span>{{ route.title }}</span>
            </el-menu-item>
          </el-menu>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple-light">
          <i class="el-icon-user-solid" style="margin-right: 15px"></i>
          <span>{{ username }}</span>
        </div>
      </el-col>
    </el-row>

    <!-- 侧边栏导航 -->
    <div class="main-container">
      <router-view />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "未登录",
    };
  },
  computed: {
    showHeader() {
      return this.$route.path !== "/login";
    },
    showSidebar() {
      return ["/home", "/demo"].includes(this.$route.path);
    },
    mainRoutes() {
      return this.$router.options.routes.filter(
        (route) => route.name && !route.redirect
      );
    },
    activeMenu() {
      return this.$route.matched[0]?.path || "/";
    },
  },
  mounted() {
    this.user();
  },
  methods: {
    user() {
      const user = this.$storage.get("user");
      console.log(user);
      this.username = user.name;
    },
    navigateTo(route) {
      if (route.path !== this.$route.path) {
        this.$router.push(route.path);
      }
    },
  },
};
</script>

<style>
#app {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.bg-purple-light {
  background-color: #545c64;
  height: 60px;
  color: #fff;
  border-bottom: solid 1px #e6e6e6;
  text-align: left;
  line-height: 60px;
}
.header-el-row {
  height: 60px;
}
.header {
  height: 61px;
}

.main-container {
  flex: 1;
  display: flex;
}

.content {
  flex: 1;
  padding: 20px;
  overflow: auto;
}
</style>
